<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Canvas for chassis</title>

<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/scroll/jquery.mousewheel.js"></script>
<script type="text/javascript" src="js/scroll/perfect-scrollbar.js"></script>
<script type="text/javascript" src="js/my/chassis.js"></script>
<link  href="css/scroll/perfect-scrollbar.css" rel="stylesheet" />

<style type="text/css">
#divForCanvas{
	overflow:scroll; /*任何时候都强制显示滚动条*/
	overflow:auto; /*需要的时候会出现滚动条*/
	overflow-x:auto; /*控制X方向的滚动条*/
	overflow-y:auto; /*控制Y方向的滚动条*/
	overflow: hidden;
	width:597px;
	height:104px;
}

.chassisHolder {
	 position:relative; 
	 margin:0px auto; 
	 padding:0px; 
	 width: 700px; 
	 height: 300px; 
	 overflow: hidden; 
	}
.chassisHolder .chassisContent {
	border:1px solid #cfcfcf;
}
.contentHolder { position:relative; margin:0px auto; padding:0px; 
	width: 600px; height: 400px; overflow: hidden; }
.contentHolder .content { background-image: url('./imgs/azusa.jpg'); 
	width: 1280px; height: 720px; }

.pop-box {   
    z-index: 9999; /*这个数值要足够大，才能够显示在最上层*/  
    display: none;   
    position: absolute;
    background: #FFF; 
    border:solid 1px #6e8bde;   
}  

.mask {   
    background-color:#000000;
    position:absolute;
    top:0px;
    left:0px;
    opacity:0.3;
}

</style>
    <!-- filter:alpha(opacity:30); -->
</head>
<body>
	
	<hr/>
	<button onclick="showPopUp()"> 弹出 </button>
	<button onclick="showPopUp2()"> show </button>
	<hr/>
	<div style="border:1px solid #000;" id="divForCanvas1" class="chassisHolder">
		<canvas id="chassis"  width="700px"  height="300px" class="chassisContent">
			This browser does not support HTML5 Canvas.
		</canvas>
	</div>
	
	<div id="testDiv"  style="width:80px;height:80px;display:none;background-color:red;">
	</div>

	<div id="popUpChassisHolder" class="pop-box">
		<canvas id="popUpChassis">
		</canvas> 
	</div>
	
	

	<script type="text/javascript">
		doChassisInit();
		$(document).ready(function(){
			$('#divForCanvas1').perfectScrollbar();
			//{suppressScrollX: true}
		});
	</script>
</body>
</html>